<template>
  <div id="app" v-loading="loading" element-loading-custom-class="rightFixedLoad">
    <div class="title">
      {{type.list[type.index]}}数据
      <div class="rightBotttom">
        <a :class="type.index==0?'active':''" @click="changeData('today')">今日</a>
        <a :class="type.index==1?'active':''" @click="changeData('yesterday')">昨日</a>
        <a :class="type.index==2?'active':''" @click="changeData('frontSenDay')">前7天</a>
        <a :class="type.index==3?'active':''" @click="changeData('frontThirtDay')">前30天</a>
        <a :class="type.index==4?'active':''" @click="changeData('all')">累计</a>
      </div>
    </div>
    <head-total 
      :type="type"
      :dynamicData="dynamicData"
    />

    <div class="rechane">
      <div class="title">充值提现<font>用户总余额：{{
          awiatMoneyTotal
        }}</font></div>
      <div id="columnar"></div>
    </div>
    
    <div class="sencode clearfix">
      <div class="left">
        <div class="title">{{type.list[type.index]}}上榜</div>
        <el-table :data="tableData" style="width: 100%;margin-top:15px;">
          <el-table-column label="用户" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <div class="userHead">
                <img :src="tableData[scope.$index].avatar" class="square" />
                {{tableData[scope.$index].nick}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="count" label="数量" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="reason" label="原因" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <div class="reason" v-if="tableData[scope.$index].reason==1" style="background:linear-gradient(to right, #84d9d2, #07cdae);">
                  发布任务最多
              </div>
              <div class="reason" v-if="tableData[scope.$index].reason==2" style="background:linear-gradient(to right, #f6e384, #ffd500);">
                  接受任务最多
              </div>
              <div class="reason" v-if="tableData[scope.$index].reason==3" style="background:linear-gradient(to right, #90caf9, #047edf 99%);">
                  充值最多
              </div>
              <div class="reason" v-if="tableData[scope.$index].reason==4" style="background:linear-gradient(to right, #ffbf96, #fe7096);">
                  提现最多
              </div>
              <div class="reason" v-if="tableData[scope.$index].reason==5" style="background:linear-gradient(to right, #dfa7f6, #d46cff);">
                  邀请最多
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="right">
        <div id="sex"></div>
      </div>
    </div>


    <div class="classOver clearfix"
      v-if="taskCompleteList.length>0"
    >
      <div class="title">{{type.list[type.index]}}完成度
          <font style="float:right;color:red;font-size:15px;color:#949494;margin-top:10px;">
            今日完成{{
              taskCompletePriceTotal
            }}元
          </font>
        </div>
      <ul class="clearfix">
        <template
          v-for="(subjectItem,subjectIndex) of taskCompleteList"
        >
            <li @mouseenter="classOverIndex=subjectIndex"
              :key="subjectIndex + 'subject'"
            >
              <div class="left">
                <img :src="subjectItem.icon" />
                <h3 class="ell">
                  {{
                    subjectItem.name
                  }}
                </h3>
                <p>
                  任务：{{
                    subjectItem.totalCount.complete + " /" + subjectItem.totalCount.publish
                  }}个<br/>
                  金额：{{
                    subjectItem.totalPrice.complete + " /" + subjectItem.totalPrice.publish
                  }}元
                </p>
                <div class="pr"><div style="width:20%;"></div></div>
              </div>
              <div class="right" :class="classOverIndex==subjectIndex?'rightShow':''">
                <template
                  v-for="(taskSortItem,taskSortIndex) of subjectItem.branchList"
                >
                    <div  
                      :key="taskSortIndex+'taskSort'"
                    >
                      <a class="ell">
                        <img 
                          :src="taskSortItem.icon" />
                          {{
                            taskSortItem.name
                          }}
                      </a>
                      <div class="clearfix">任务{{
                          taskSortItem.totalCount.complete + " /" + taskSortItem.totalCount.publish
                        }}，金额{{
                          taskSortItem.totalPrice.complete + " /" + taskSortItem.totalPrice.publish
                        }}</div>
                  </div>
                </template>
              </div>
            </li>
        </template>
      </ul>
    </div>
    
    <div class="moneyChild">
      <div class="title">{{type.list[type.index]}}资金流向</div>
      <div class="moneyChildD clearfix">
        <div class="item" style="width:25%;">
          <div class="ti">
            <div>充值金额</div>
            <font>
              {{
                investMoney.total
              }}
            </font>
          </div>
          <div class="co clearfix">
            <i class="line" style="transform: rotate(30deg);left: 21%;top: 0%;"></i>
            <i class="line" style="top:10%;"></i>
            <i class="line" style="transform: rotate(-30deg);left: 77%;top: 0%;"></i>
            <div class="chili" style="width:33.33333%;">
              <h3><img src="../../../static/img/alipay.png" />支付宝</h3>
              <p>
                {{
                    investMoney.zfb
                }}
              </p>
            </div>
            <div class="chili" style="width:33.33333%;">
              <h3><img src="../../../static/img/wechat.png" />微信</h3>
              <p>
                {{
                  investMoney.weixin
                }}
              </p>
            </div>
            <div class="chili" style="width:33.33333%;">
              <h3><img src="../../../static/img/invite.png" />手动</h3>
              <p>
                {{
                  investMoney.admin
                }}
              </p>
            </div>
          </div>
        </div>

        <div class="item" style="width:25%;">
          <div class="ti">
            <div>盈利</div>
            <font>
              {{
                incomeMoney.total
              }}
            </font>
          </div>
          <div class="co clearfix">
            <i class="line" style="transform: rotate(30deg);left: 21%;top: 0%;"></i>
            <i class="line" style="top:10%;"></i>
            <i class="line" style="transform: rotate(-30deg);left: 77%;top: 0%;"></i>
            <div class="chili" style="width:33.33333%;">
              <h3>任务抽佣</h3>
              <p>
                {{
                    incomeMoney.platefromAmount
                }}
              </p>
            </div>
            <div class="chili" style="width:33.33333%;">
              <h3>置顶</h3>
              <p>
                {{
                    incomeMoney.stick
                }}
              </p>
            </div>
            <div class="chili" style="width:33.33333%;">
              <h3>提现手续费</h3>
              <p>
                {{
                  incomeMoney.cashServiceFee
                }}
              </p>
            </div>
          </div>
        </div>

        <div class="item" style="width:50%;">
          <div class="ti">
            <div>支出</div>
            <font>
              {{
                expendMoneu.total
              }}
            </font>
          </div>
          <div class="co clearfix">
            <i class="line" style="transform: rotate(54deg);left: 12%;top: 0%;"></i>
            <i class="line" style="transform: rotate(46deg);left: 28%;top: 0%;"></i>
            <i class="line" style="transform: rotate(40deg);left: 44%;top: 11%;"></i>
            <i class="line" style="transform: rotate(-40deg);left: 56%;top: 11%;"></i>
            <i class="line" style="transform: rotate(-46deg);left: 72%;top: 0%;"></i>
            <i class="line" style="transform: rotate(-54deg);left: 88%;top: 0%;"></i>
            <div class="chili" style="width:calc(100% / 6);">
              <h3>被邀请者</h3>
              <p>
                {{
                    expendMoneu.beInvite
                }}
              </p>
            </div>
            <div class="chili" style="width:calc(100% / 6);">
              <h3>邀请者</h3>
              <p>
                {{
                    expendMoneu.invite
                }}
              </p>
            </div>
            <div class="chili" style="width:calc(100% / 6);">
              <h3>邀请排行</h3>
              <p>
                {{
                  expendMoneu.inviteRange
                }}
              </p>
            </div>
            <div class="chili" style="width:calc(100% / 6);">
              <h3>代理分佣</h3>
              <p>
                {{
                  expendMoneu.commission
                }}  
              </p>
            </div>
            <div class="chili" style="width:calc(100% / 6);">
              <h3>补贴计划</h3>
              <p>
                {{
                  expendMoneu.taskRewarde
                }}
              </p>
            </div>
            <div class="chili" style="width:calc(100% / 6);">
              <h3>积分兑换</h3>
              <p>
                {{
                  expendMoneu.scoreAmout
                }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>


    

    <div class="userX">
      <div class="title">用户行为标签</div>
      <div class="c">
        <div class="item">
          <div class="t">新用户（今日注册）</div>
          <ul class="clearfix">
            <template
              v-for="(newsUserItem,newsUserIndex) of newUserTagsList"
            >
                  <li
                    :key="newsUserIndex + 'newsUser'"
                  >
                    {{
                      newsUserItem
                    }}
                  </li>
            </template>
          </ul>
        </div>
        <div class="item">
          <div class="t">老用户</div>
          <ul class="clearfix">
            <template
              v-for="(oldUserItem,oldUserIndex) of oldUserTagsList"
            >
                  <li
                    :key="oldUserIndex + 'oldUser'"
                  >
                    {{
                      oldUserItem
                    }}
                  </li>
            </template>
          </ul>
        </div>

      </div>
    </div>

    <div id="push"></div>
    <div class="threen clearfix">
      <div class="left">
        <div id="earth"></div>
      </div>
      <div class="right">
        <div id="radar"></div>
      </div>
    </div>




  </div>
</template>
<script>
  import HomeIndex from './index';
  export default HomeIndex;
</script>

<style scoped lang="scss">
    @import './index.scss';
</style>